<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Class: Size</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
    <link type="text/css" rel="stylesheet" href="styles/custom.css">
    <!--[if lt IE 9]>
    <script src="scripts/html5shiv.min.js"></script>
    <script src="scripts/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div style="position:fixed;top:0px;left:0px;"><h1 class="page-title">Class: Size</h1></div>
<div id="main" style="margin-top:77px;">
    





<nav class="classnav scroll-styled">

    <h5><a href="#main" style="color:#000">class : Size</a></h5>
    
        <h5>Members</h5>
        <ul>
        
            <li><a href="#width">width</a></li>
        
            <li><a href="#height">height</a></li>
        
        </ul>
    

    

        
            
            
            
            
            
            
            
        
        <h5>Methods</h5>
        <ul>
        
            
                <li><a href="#copy">
            
                copy</a></li>
        
            
                <li><a href="#add">
            
                add</a></li>
        
            
                <li><a href="#equals">
            
                equals</a></li>
        
            
                <li><a href="#multi">
            
                multi</a></li>
        
            
                <li><a href="#toPoint">
            
                toPoint</a></li>
        
            
                <li><a href="#toArray">
            
                toArray</a></li>
        
            
                <li><a href="#toJSON">
            
                toJSON</a></li>
        
        </ul>
    

    
</nav>


<section class="classmain">
    


<header>
    
        <h2>Size</h2>
        
            <div class="class-description">Represents a size.</div>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    <!-- <h2>Constructor</h2> -->
    
    <h4 class="name" id="Size"><span class="type-signature"></span>new <a href="#Size">Size</a><span class="signature">(width, height)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L8" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L8" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#Size" class="improvelink">[link]</a> -->
    </h4>

    
    







<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>width</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">width value</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>height</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">height value</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->






























<hr>
    
    </div>

    <!--  -->

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<li>
<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L19" class="improvelink">[help to improve]</a>
    
    <a href="#width" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>width</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">width</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js">geo/Size.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L19">line 19</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
            
<li>
<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"></span>

<!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L23" class="improvelink">[help to improve]</a>
    
    <a href="#height" class="improvelink">[link]</a></h4> -->
</li>














    <h5 class="subsection-title">Properties:</h5>

    

<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>



        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>height</code>
                    
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>



            

            <td class="description last">height</td>
        </tr>

    
    </tbody>
</table>



<dl class="details">

    

    

    

    

    

        

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js">geo/Size.js</a>, <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L23">line 23</a>
        

    </li></ul></dd>
    

    

    

    
</dl>






<hr>
        
    

    
        

        
                    <h3 class="subsection-title">Methods</h3>
                
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="copy"><span class="type-signature"></span><a href="#copy">copy</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L37" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L37" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#copy" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Returns a copy of the size
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Size.html">Size</a></span>:

        
<!-- <div class="param-desc"> -->
    copy
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="add"><span class="type-signature"></span><a href="#add">add</a><span class="signature">(size)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L46" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L46" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#add" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Returns the result of addition of another size.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>size</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Size.html">Size</a></span>


            
            </td>

            

            <td class="description last">size to add</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Size.html">Size</a></span>:

        
<!-- <div class="param-desc"> -->
    result
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="equals"><span class="type-signature"></span><a href="#equals">equals</a><span class="signature">(size)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L63" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L63" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#equals" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Compare with another size to see whether they are equal.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>size</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Size.html">Size</a></span>


            
            </td>

            

            <td class="description last">size to compare</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Boolean</span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="multi"><span class="type-signature"></span><a href="#multi">multi</a><span class="signature">(ratio)</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L72" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L72" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#multi" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Returns the result of multiplication of the current size by the given number.
</div>




<!--  -->




    

<table class="params">
    <thead>
    <tr>
        
        <th>Parameter</th>
        
        <th>Type</th>

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ratio</code>
                
                </td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            <td class="description last">ratio to multi</td>
        </tr>

    
    </tbody>
</table>



<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Size.html">Size</a></span>:

        
<!-- <div class="param-desc"> -->
    result
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="toPoint"><span class="type-signature"></span><a href="#toPoint">toPoint</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L92" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L92" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#toPoint" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Converts the size object to a [Point]{Point}
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature"><a href="Point.html">Point</a></span>:

        
<!-- <div class="param-desc"> -->
    point
<!-- </div> -->



    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="toArray"><span class="type-signature"></span><a href="#toArray">toArray</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L100" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L100" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#toArray" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Converts the size object to an array [width, height]
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Array.&lt;Number></span>:

        


    


<hr>
        
            

    <!-- <h2>Constructor</h2> -->
    
    <li>
    
    <h4 class="name" id="toJSON"><span class="type-signature"></span><a href="#toJSON">toJSON</a><span class="signature">()</span>
    
        
            <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L108" class="improvelink">[source]</a>
        
    
    <!-- 
        <a target="_blank" href="https://github.com/maptalks/maptalks.js/tree/master/src/geo/Size.js#L108" class="improvelink">[help to improve]</a>
     -->
    <!-- <a href="#toJSON" class="improvelink">[link]</a> -->
    </h4>

    
    </li>
    
    




<div class="description">
    Convert the size object to a json object {width : .., height : ..}
</div>




<!--  -->





<!-- event properties -->




























<h5>Returns:</h5>
<span class="type-signature">Object</span>:

        
<!-- <div class="param-desc"> -->
    json
<!-- </div> -->



    


<hr>
        
    

    

    
</article>

</section>




</div>

<nav class="page-nav">
    <h2><a href="index.html">V0.47.0</a></h2><h4>Classes</h4><ul></ul><h5>Map</h5><ul><li><a href="Map.html">Map</a></li></ul><h5>Layer</h5><ul><li><a href="Layer.html">Layer</a></li><li><a href="TileSystem.html">TileSystem</a></li><li><a href="TileLayer.html">TileLayer</a></li><li><a href="GroupTileLayer.html">GroupTileLayer</a></li><li><a href="WMSTileLayer.html">WMSTileLayer</a></li><li><a href="OverlayLayer.html">OverlayLayer</a></li><li><a href="VectorLayer.html">VectorLayer</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="ParticleLayer.html">ParticleLayer</a></li><li><a href="ImageLayer.html">ImageLayer</a></li></ul><h5>Geometry</h5><ul><li><a href="Geometry.html">Geometry</a></li><li><a href="Path.html">Path</a></li><li><a href="Marker.html">Marker</a></li><li><a href="TextMarker.html">TextMarker</a></li><li><a href="Label.html">Label</a></li><li><a href="TextBox.html">TextBox</a></li><li><a href="Polygon.html">Polygon</a></li><li><a href="LineString.html">LineString</a></li><li><a href="Curve.html">Curve</a></li><li><a href="ArcCurve.html">ArcCurve</a></li><li><a href="QuadBezierCurve.html">QuadBezierCurve</a></li><li><a href="CubicBezierCurve.html">CubicBezierCurve</a></li><li><a href="ConnectorLine.html">ConnectorLine</a></li><li><a href="ArcConnectorLine.html">ArcConnectorLine</a></li><li><a href="Ellipse.html">Ellipse</a></li><li><a href="Circle.html">Circle</a></li><li><a href="Sector.html">Sector</a></li><li><a href="Rectangle.html">Rectangle</a></li><li><a href="GeometryCollection.html">GeometryCollection</a></li><li><a href="MultiGeometry.html">MultiGeometry</a></li><li><a href="MultiPoint.html">MultiPoint</a></li><li><a href="MultiLineString.html">MultiLineString</a></li><li><a href="MultiPolygon.html">MultiPolygon</a></li><li><a href="GeoJSON.html">GeoJSON</a></li><li><a href="GeometryEditor.html">GeometryEditor</a></li></ul><h5>Basic types</h5><ul><li><a href="Coordinate.html">Coordinate</a></li><li><a href="Extent.html">Extent</a></li><li><a href="Point.html">Point</a></li><li><a href="PointExtent.html">PointExtent</a></li><li><a href="Position.html">Position</a></li><li><a href="Size.html">Size</a></li></ul><h5>Maptool</h5><ul><li><a href="MapTool.html">MapTool</a></li><li><a href="DrawTool.html">DrawTool</a></li><li><a href="DistanceTool.html">DistanceTool</a></li><li><a href="AreaTool.html">AreaTool</a></li></ul><h5>Ui</h5><ul><li><a href="ui.UIComponent.html">ui.UIComponent</a></li><li><a href="ui.UIMarker.html">ui.UIMarker</a></li><li><a href="ui.InfoWindow.html">ui.InfoWindow</a></li><li><a href="ui.ToolTip.html">ui.ToolTip</a></li><li><a href="ui.Menu.html">ui.Menu</a></li></ul><h5>Control</h5><ul><li><a href="control.Control.html">control.Control</a></li><li><a href="control.Zoom.html">control.Zoom</a></li><li><a href="control.LayerSwitcher.html">control.LayerSwitcher</a></li><li><a href="control.Attribution.html">control.Attribution</a></li><li><a href="control.Scale.html">control.Scale</a></li><li><a href="control.Panel.html">control.Panel</a></li><li><a href="control.Toolbar.html">control.Toolbar</a></li><li><a href="control.Overview.html">control.Overview</a></li></ul><h5>Core</h5><ul><li><a href="Ajax.html">Ajax</a></li><li><a href="Class.html">Class</a></li><li><a href="MapboxUtil.html">MapboxUtil</a></li><li><a href="Util.html">Util</a></li><li><a href="DomUtil.html">DomUtil</a></li><li><a href="StringUtil.html">StringUtil</a></li></ul><h5>Animation</h5><ul><li><a href="animation.Easing.html">animation.Easing</a></li><li><a href="animation.Frame.html">animation.Frame</a></li><li><a href="animation.Player.html">animation.Player</a></li><li><a href="animation.Animation.html">animation.Animation</a></li></ul><h5>Geo</h5><ul><li><a href="CRS.html">CRS</a></li><li><a href="measurer.Identity.html">measurer.Identity</a></li><li><a href="measurer.DEFAULT.html">measurer.DEFAULT</a></li><li><a href="measurer.Measurer.html">measurer.Measurer</a></li><li><a href="measurer.WGS84Sphere.html">measurer.WGS84Sphere</a></li><li><a href="measurer.BaiduSphere.html">measurer.BaiduSphere</a></li><li><a href="projection.DEFAULT.html">projection.DEFAULT</a></li><li><a href="projection.BAIDU.html">projection.BAIDU</a></li><li><a href="projection.EPSG3857.html">projection.EPSG3857</a></li><li><a href="projection.EPSG4326.html">projection.EPSG4326</a></li><li><a href="projection.EPSG4490.html">projection.EPSG4490</a></li><li><a href="projection.IDENTITY.html">projection.IDENTITY</a></li><li><a href="Transformation.html">Transformation</a></li></ul><h5>Handler</h5><ul><li><a href="Handler.html">Handler</a></li><li><a href="DragHandler.html">DragHandler</a></li></ul><h5>Other</h5><ul><li><a href="renderer.CanvasRenderer.html">renderer.CanvasRenderer</a></li></ul><h4>Namespaces</h4><ul><li><a href="measurer.html">measurer</a></li><li><a href="projection.html">projection</a></li><li><a href="renderer.html">renderer</a></li></ul><h4>Mixins</h4><ul><li><a href="Eventable.html">Eventable</a></li><li><a href="JSONAble.html">JSONAble</a></li><li><a href="measurer.Common.html">measurer.Common</a></li><li><a href="projection.Common.html">projection.Common</a></li><li><a href="Handlerable.html">Handlerable</a></li><li><a href="CenterMixin.html">CenterMixin</a></li><li><a href="TextEditable.html">TextEditable</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="ui.Menuable.html">ui.Menuable</a></li></ul><h3>Global</h3><ul><li><a href="global.html#INTERNAL_LAYER_PREFIX">INTERNAL_LAYER_PREFIX</a></li><li><a href="global.html#RESOURCE_PROPERTIES">RESOURCE_PROPERTIES</a></li><li><a href="global.html#RESOURCE_SIZE_PROPERTIES">RESOURCE_SIZE_PROPERTIES</a></li><li><a href="global.html#NUMERICAL_PROPERTIES">NUMERICAL_PROPERTIES</a></li><li><a href="global.html#COLOR_PROPERTIES">COLOR_PROPERTIES</a></li><li><a href="global.html#getListeningEvents">getListeningEvents</a></li><li><a href="global.html#isEmpty">isEmpty</a></li><li><a href="global.html#IS_NODE">IS_NODE</a></li><li><a href="global.html#identity">identity</a></li><li><a href="global.html#copy">copy</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#add">add</a></li><li><a href="global.html#subtract">subtract</a></li><li><a href="global.html#length">length</a></li><li><a href="global.html#normalize">normalize</a></li><li><a href="global.html#dot">dot</a></li><li><a href="global.html#scale">scale</a></li><li><a href="global.html#cross">cross</a></li><li><a href="global.html#distance">distance</a></li><li><a href="global.html#transformMat4">transformMat4</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Feb 18 2020 16:21:05 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>